<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="80px" @keyup.enter.native="dataFormSubmit()">
      <el-form-item label="目录名称" prop="catname">
        <el-input v-model="dataForm.catname" placeholder="目录名称" />
      </el-form-item>
      <!--
    <el-form-item label="父节点" prop="parentid">
      <el-input v-model="dataForm.parentid" placeholder="父ID"></el-input>
    </el-form-item>
  -->
      <el-form-item label="上级分类">
        <el-input
          ref="parentName"
          v-model="dataForm.parentcatname"
          v-popover:menuListPopover
          :readonly="true"
          placeholder="点击选择上级菜单"
          class="menu-list__input"
        />
        <el-popover
          ref="menuListPopover"
          placement="bottom-start"
          trigger="click"
          @show="getPopover('parentName','menuListPopover')"
        >
          <div style="height: 200px;overflow-y:auto">
            <el-tree
              ref="catsTree"
              :data="cats"
              :props="catsTreeProps"
              node-key="catid"
              :default-expand-all="true"
              :highlight-current="true"
              :expand-on-click-node="false"
              @current-change="catsTreeCurrentChangeHandle"
            />
          </div>
        </el-popover>
      </el-form-item>
      <el-form-item label="排序" prop="catsort">
        <el-input v-model="dataForm.catsort" placeholder="排序" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { treeDataTranslate } from '@/utils'
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        catid: 0,
        shopid: '',
        parentid: '',
        isshow: '',
        catname: '',
        catsort: '',
        dataflag: '',
        createtime: '',
        creator: '',
        updatetime: '',
        parentcatname: '',
        updater: ''
      },
      cats: [],
      catsTreeProps: {
        label: 'catname',
        children: 'children'
      },
      dataRule: {
        shopid: [
          { required: true, message: '店铺ID不能为空', trigger: 'blur' }
        ],
        parentid: [
          { required: true, message: '父ID不能为空', trigger: 'blur' }
        ],
        isshow: [
          { required: true, message: '是否显示不能为空', trigger: 'blur' }
        ],
        catname: [
          { required: true, message: '目录名称不能为空', trigger: 'blur' }
        ],
        catsort: [
          { required: true, message: '排序不能为空', trigger: 'blur' }
        ],
        dataflag: [
          { required: true, message: '删除不能为空', trigger: 'blur' }
        ],
        createtime: [
          { required: true, message: '创建时间不能为空', trigger: 'blur' }
        ],
        creator: [
          { required: true, message: '创建人不能为空', trigger: 'blur' }
        ],
        updatetime: [
          { required: true, message: '修改时间不能为空', trigger: 'blur' }
        ],
        udater: [
          { required: true, message: '修改人不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    getPopover(container, popover) {
      this.$refs[popover].width = this.$refs[container].$el.offsetWidth
      this.$refs[popover].disable = false
    },
    catsTreeCurrentChangeHandle(data, node) {
      this.dataForm.parentid = data.catid
      this.dataForm.parentcatname = data.catname
    },
    init(id, parentid) {
      this.dataForm.catid = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        this.dataForm.parentid = parentid || 0
        this.$http({
          url: this.$http.adornUrl('/goods/cats/listCats'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          this.cats = treeDataTranslate(data.page.list, 'catid', 'parentid')
        }).then(() => {
          if (this.dataForm.catid) {
            this.$http({
              url: this.$http.adornUrl(`/goods/cats/infoCats/${this.dataForm.catid}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.dataForm.shopid = data.GoodsCat.shopid
                this.dataForm.parentid = data.GoodsCat.parentid
                this.dataForm.isshow = data.GoodsCat.isshow
                this.dataForm.catname = data.GoodsCat.catname
                this.dataForm.catsort = data.GoodsCat.catsort
                this.dataForm.dataflag = data.GoodsCat.dataflag
                this.dataForm.createtime = data.GoodsCat.createtime
                this.dataForm.creator = data.GoodsCat.creator
                this.dataForm.updatetime = data.GoodsCat.updatetime
                this.dataForm.udater = data.GoodsCat.udater
                if (this.dataForm.parentid && this.dataForm.parentid !== 0) {
                  this.catsTreeSetCurrentNode()
                } else {
                  this.dataForm.parentcatname = ''
                }
              }
            })
          } else {
            if (this.dataForm.parentid && this.dataForm.parentid !== 0) {
              this.catsTreeSetCurrentNode()
            } else {
              this.dataForm.parentcatname = ''
            }
          }
        })
      })
    },
    // 菜单树设置当前选中节点
    catsTreeSetCurrentNode() {
      this.$refs.catsTree.setCurrentKey(this.dataForm.parentid)
      this.dataForm.parentcatname = (this.$refs.catsTree.getCurrentNode() || {})['catname']
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/goods/cats/${!this.dataForm.catid ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData({
              'catid': this.dataForm.catid || undefined,
              'shopid': this.dataForm.shopid,
              'parentid': this.dataForm.parentid,
              'isshow': this.dataForm.isshow,
              'catname': this.dataForm.catname,
              'catsort': this.dataForm.catsort,
              'dataflag': this.dataForm.dataflag,
              'createtime': this.dataForm.createtime,
              'creator': this.dataForm.creator,
              'updatetime': this.dataForm.updatetime,
              'udater': this.dataForm.udater
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
